<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 传统的this指向 
    // 1. 普通函数(命名函数 匿名函数)  this -> window(函数调用时没有依存的对象),严格模式下 this-> undefined
    // 2. 函数在调用时,属于谁就指向谁 (函数调用时有依存的对象 this-> 依存的对象)

    // 3. 箭头函数没有自己的this指向,它的this依赖于上层作用域(父作用域)的this指向,简单的来说 ,箭头函数中的this 向会向外跳一层找父作用域的this指向,如果父作用域还是箭头函数继续向外 跳一层,直到全局作用域

    // 普通函数
    // function fn() {
    //     console.log(this); // this -> window
    // }

    // var zhang = {
    //     name: "张三",
    //     age: 18,
    //     say: function () {
    //         console.log(this); // this-> zhang
    //         console.log(this.name, this.age);
    //     }
    // }
    // zhang.say();


    // document.onclick = function () {
    //     console.log(this); // document
    // }




    // 箭头函数
    // (1) 单层箭头函数  => 向外跳一层 -> window
    // var fn = () => {
    //     console.log(this); // this -> window
    // }
    // fn();

    // var zhang = {
    //     name: "张三",
    //     age: 18,
    //     say: () => {
    //         console.log(this); // this-> window
    //         console.log(this.name, this.age);
    //     }
    // }
    // zhang.say();


    // document.onclick = () => {
    //     console.log(this); // window
    // }


    // 普通函数包裹箭头函数
    // function fn() {
    //     console.log(this); // this -> window
    //     let test = () => {
    //         console.log(this);  // this -> window
    //     }
    //     test();
    // }
    // fn();

    // var zhang = {
    //     name: "张三",
    //     age: 18,
    //     say: function () {
    //         console.log(this); // this-> zhang
    //         console.log(this.name, this.age);

    //         let test = () => {
    //             console.log(this);  // this -> zhang
    //         }
    //         test();
    //     }
    // }
    // zhang.say();

    // document.onclick = function () {
    //     console.log(this); // document

    //     let test = () => {
    //         console.log(this);  // this -> document
    //     }
    //     test();
    // }


    // 箭头函数嵌套箭头函数

    var fn = () => {
        console.log(this); // this -> window

        let test = () => {
            console.log(this);  // this -> window
        }
        test();
    }
    fn();

    var zhang = {
        name: "张三",
        age: 18,
        say: () => {
            console.log(this); // this-> window
            // console.log(this.name, this.age);

            let test = () => {
                console.log(this);  // this -> window
            }
            test();
        }
    }
    zhang.say();

    document.onclick = () => {
        console.log(this); // window

        let test = () => {
            console.log(this);  // this -> window
        }
        test();
    }













</script>

</html>